<template>
    <div class="work-experience edit-card">
        <h2 class="section-title">工作经历</h2>
        <div class="text-xs mb-4">列出你认为最重要最近十年的工作经历，最新放在最前面，工作经验是简历中很重要的一部分，要充分突出工作以及项目中的亮点</div>
        <el-form class="experience-form" v-for="(exp, index) in modelValue" :key="index" label-position="top">
            <div class="form-header">
                <h3>工作经历 {{ index + 1 }}</h3>
                <el-button v-if="modelValue?.length > 1" @click="removeExperience(index)" type="danger" size="small"
                    :icon="Delete" circle />
            </div>

            <el-row gutter="20">
                <el-col :span="12">
                    <el-form-item label="公司名称">
                        <el-input v-model="exp.company" placeholder="例如：阿里巴巴" />
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="职位名称">
                        <el-input v-model="exp.position" placeholder="例如：前端开发工程师" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row gutter="20">
                <el-col :span="12">
                    <el-form-item label="工作地点">
                        <el-input v-model="exp.location" placeholder="例如：杭州" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作时间">
                        <el-date-picker v-model="exp.dateRange" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="工作描述">
                <!-- <el-input v-model="exp.description" type="textarea" :rows="3" placeholder="描述你的工作职责和成就" /> -->
                <client-only>
                    <div class="flex flex-col flex-1">
                        <QuillEditor v-model="exp.description" />
                    </div>
                </client-only>
            </el-form-item>

            <el-form-item label="使用技术/工具">
                <el-select v-model="exp.technologies" multiple filterable allow-create placeholder="请选择或输入使用的技术"
                    style="width: 100%">
                    <el-option v-for="tech in commonTechnologies" :key="tech" :label="tech" :value="tech" />
                </el-select>
            </el-form-item>
            <el-divider />
        </el-form>

        <el-button @click="addExperience" link type="primary" :icon="Plus" class="add-btn">
            添加工作经历
        </el-button>
    </div>
</template>

<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import QuillEditor from '~/components/QuillEditor.vue'

const props = defineProps({
    modelValue: {
        type: Array,
        default: () => [
            {
                company: '',
                position: '',
                location: '',
                dateRange: [],
                description: '',
                technologies: []
            }
        ]
    }
})

const emit = defineEmits(['update:modelValue'])

const commonTechnologies = ref([
    'Vue.js',
    'React',
    'TypeScript',
    'JavaScript',
    'HTML/CSS',
    'Node.js',
    'Webpack',
    'Vite',
    'Git',
    'Docker',
    'Electron'
])

const addExperience = () => {
    const newExperiences = [...props.modelValue, {
        company: '',
        position: '',
        location: '',
        dateRange: [],
        description: '',
        technologies: []
    }]
    emit('update:modelValue', newExperiences)
}

const removeExperience = (index) => {
    if (props.modelValue.length > 1) {
        const newExperiences = [...props.modelValue]
        newExperiences.splice(index, 1)
        emit('update:modelValue', newExperiences)
    }
}
</script>

<style lang="scss" scoped>
.work-experience {
    .section-title {
        @apply text-xl font-bold mb-6;
    }

    .experience-form {
        @apply mb-6;

        .form-header {
            @apply flex justify-between items-center mb-4;

            h3 {
                @apply text-lg font-medium;
            }
        }
    }

}
</style>